
<template>
    <div class='details'>
        <h2>专业技能</h2>

        <div class="card">    
            <el-carousel :interval="6000" type="card" height="400px" :autoplay="false" :pause-on-hover="true">            
                <el-carousel-item v-for="(item,index) in skillList" :key="item" :class="`card-background-${index}`">
                    <h3 class="title">{{item.title}}</h3>
                    <div class="carousel-content">
                        <div>
                            <h4  class="carousel-title">常用</h4>
                            <div v-for="stoc in item.stocList" :key="stoc" class="carousel-item">
                                <el-button :round="roundRandom()" :plain="plainRandom()" :type="typeRandom()" :size="sizeRandom()">{{stoc}}</el-button>
                            </div>
                        </div>
                        <div>
                            <h4 v-if="item.familiarList.length>0"  class="carousel-title">熟悉</h4>
                            <div v-for="familiar in item.familiarList" :key="familiar" class="carousel-item">
                                <el-button :round="roundRandom()" :plain="plainRandom()" :type="typeRandom()" :size="sizeRandom()">{{familiar}}</el-button>
                            </div>
                        </div>
                    </div>
                </el-carousel-item>
            </el-carousel>
        </div>

    </div>
</template>
<script >
export default ({
    name:'',
    components: {

    },
    mounted(){
        
    },
    data(){
        return{
            typeList:['primary' ,'success' ,'info' ,'warning' ,'danger'],
            sizeList:['large',  'default', 'small' ,'mini'],
            skillList:[
                {
                    title:'语言/语法',
                    stocList:['ES6','JavaScript','Html5','Css3','TypeScript'],
                    familiarList:['JAVA','C#','C'],
                },
                {
                    title:'框架/库',
                    familiarList:[],
                    stocList:['Vue2','Element-UI','Vue3','Element-PLUS','Vant','JQuery','Print-js' , 'BarCode','Qrcode','Html2canvas','Echarts','UEditor','Ant Design Vue'],
                    
                },
                {
                    title:'工具/软件',
                    stocList:['Node','npm包管理工具','Yapi','Git','Vscode' ,'Jenkins','Iconfont图标库','Vue-devtools','钉钉小程序开发者工具','huatu.98youxi.com在线流程图工具'],
                    familiarList:['Tomcat','WinSCP','MySql','Eclips','Maven','Dbvisualizer'],
                }
            ]
        }
    },
    methods:{
        roundRandom(){
            return Math.floor(Math.random()*2)
        },
        plainRandom(){
            return Math.floor(Math.random()*2)
        },
        typeRandom(){
            return this.typeList[Math.floor(Math.random()*5)]
        },
        sizeRandom(){
            return this.sizeList[Math.floor(Math.random()*4)]
        },
    }
})
</script>
<style lang="scss"  scoped>
.el-carousel__item h3 {
//   color: #f3e6f1;
  opacity: 0.75;
  line-height: 100px;
  margin: 0;
  text-align: center;
  background-color: #ccc;
}

.card-background-0{
  background-color: #f8b9b9;
  .title{
    background-color: #3e4140;
    color:#fff
  }
}
.card-background-1{
  background-color: #b2fbec;
  .title{
    background-color: #3e4140;
    color:#fff
  }
}
.card-background-2{
  background-color: #b2e2f9;
  .title{
    background-color: #3e4140;
    color:#fff
  }
}
.details{
  float: right;
  background-color:#fff;
  width:1200px;
  height: 700px;
  border-radius:20px;	
  padding: 40px;

  .card{
    margin-top: 100px;
  }
  .carousel-content{
    width:100%;
    height: 300px;
    display: flex;
    flex-direction: column;
    // flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    text-align: center;title
    .carousel-title{
        margin: 5px;
    }
    .carousel-item{
        margin: 5px;
        display: inline-block;
    }
  }
}
</style>